<template>
  <div class="menu">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isShowAside"
    >
      <div class="title">校园疫情防控系统</div>

      <el-menu-item index="item.key" v-for="item in Asidedata" :key="item.key">
        <router-link to="mynotice">
          <i class="el-icon-phone"></i>
        </router-link>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
      <!-- <el-menu-item index="2">
        <i class="el-icon-s-flag"></i>
        <span slot="title">健康填报</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-s-claim"></i>
        <span slot="title">请假申请</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-user"></i>
        <span slot="title">个人信息</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-s-comment"></i>
        <span slot="title">聊天</span>
      </el-menu-item> -->
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Asidedata: [
        {
          name: "我的通知",
          key: "1",
        },
        {
          name: "健康填报",
          key: "2",
        },
        {
          name: "请假申请",
          key: "3",
        },
        {
          name: "个人信息",
          key: "4",
        },
        {
          name: "聊天",
          key: "5",
        },
      ],
    };
  },
  computed: {
    isShowAside() {
      return this.$store.state.isShowAside;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.menu {
  height: 100%;
  .el-menu {
    height: 100%;
    .title {
      padding: 0 30px;
      text-overflow: hidden;
      overflow: hidden;
      height: 70px;
      line-height: 70px;
      text-align: center;
      font-size: 19px;
      font-weight: 500;
      border-bottom: 1px solid #ccc;
      color: rgb(207, 175, 135);
    }
  }
}
</style>
